<template>
    <tr>
      <td><img  width="100px" height="85px"  :src="blog.banner" :alt="blog.banner" /></td>
      <td>{{ blog.title }}</td>
      <td>{{ blog.summary }}</td>
        <td>
            <p>
            <a
              @click="updateSiteCoed(1)"
              :style="isHot === true ? style : ''"
              style="background: #7ad305"
              class="state"
              href="javascript:;"
            ></a>
            <a
              @click="updateSiteCoed(2)"
              :style="isTop === true ? style : ''"
              style="background: #cfd305"
              class="state"
              href="javascript:;"
            ></a>
          </p>
        </td>
        <td>
          <a @click="del" href="javascript:;">删除</a>
          <a @click="update" href="javascript:;">修改</a>
        </td>
    </tr>
</template>

<script>
export default {
  props: ["blog"],
  data() {
    return {
      style: "width:30px;height:30px",
      isHot:this.blog.isHot,
      isTop:this.blog.isTop
    };
  },
  methods:{
    updateSiteCoed(code){
      code==1?this.isHot=!this.isHot:this.isTop=!this.isTop
        var data = { 
           id:this.blog.id,
           isHot:this.isHot,
           isTop:this.isTop
        }
        this.$emit('isHotAndisTop', data);
    },
    update(){
      alert("小小北辞正在努力开发修改功能！！")
    },
    del(){
      var isdel = window.confirm("请确认是否删除 无回滚操作！！")
      if(isdel){
        this.$emit('del',this.blog.id);
      }else{
        alert("已取消操作！！")
      }
    }
  },  


};
</script>

<style scoped lang="less">
      p{
        text-align: center;
        line-height: 60px;
        .state{
          width: 15px;
          height: 15px;
          display: inline-block;
          background: #7ad305;
          border-radius: 50%;
          line-height: 150px;
          margin-left: 5px;
          // box-sizing: border-box;
       }
      }

a{
  color: rgb(41, 63, 255);
}
</style>